<template>
	<view>
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" :title="$t('Revenue')"
			barstyle="#45bc1b" Color="#fff"></TopBar>
		<view class="revwnue">
			<view class="all">
				<view class="top">
					<view class="left">
						<u-icon name="red-packet-fill" color="#45BC1B" size="38"></u-icon>
						<text>总收入</text>
					</view>
					<view class="right">￥{{money}}</view>
				</view>
				<view class="footer">
					<!-- <view class="sub-title">体现金额</view> -->
					<view class="input-box">
						<input type="text" placeholder="0.0" />
					</view>
					<view class="button">体现</view>
					<view class="time-content">
						<u-count-down :time="24 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
						<view class="text">小时后自动到账</view>
					</view>
				</view>
			</view>
			<view class="item-order">
				<view class="item" v-for="(item,index) in orderList" :style="{border:index==0?'none':''}">
					<view class="left">
						<view class="orderid">收入{{item.orderid}}</view>
						<view class="time">{{item.time}}</view>
					</view>
					<view class="right">￥{{item.number}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import {
		postmoney
	} from '@/api/all.js';
	 
	export default {
		components: {
			TopBar
		},
		data() {
			return {
				orderList: [{
						orderid: '6434',
						time: '2023.12.23 12:37:29',
						number: 45
					},
					{
						orderid: '54343',
						time: '2023.12.23 12:37:29',
						number: 45,


					},
					{
						orderid: '44343',
						time: '2023.12.23 12:37:29',
						number: 45
					},
					{
						orderid: '343434',
						time: '2023.12.23 12:37:29',
						number: 45
					},
					{
						orderid: '234334',
						time: '2023.12.23 12:37:29',
						number: 45
					},

				],
				money:0
			};
		},
		onLoad() {
			this.postMoney();
		},
		methods: {
			postMoney() {
				let that=this;
				postmoney({}).then((res) => {
					console.log(res, '++++++')
					if (res.code == 200) {
						let data = res.body.data;
						that.money=data.money
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.revwnue {
		width: 100%;
		padding: $uni-spacing-padding-sm;
		box-sizing: border-box;

		.all {
			width: 100%;

			padding: $uni-spacing-padding-sm;
			box-sizing: border-box;
			border-radius: $uni-border-radius-lg;
			margin-top: $uni-spacing-margin-sm;
			background-color: $uni-text-color-inverse;
			box-shadow: $uni-bg-shadow;

			.top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: $uni-font-size-lg;
					display: flex;
					align-items: center;

					text {
						padding: 0rpx 10rpx
					}
				}

				.right {
					color: $uni-color-topic;
					font-size: $uni-font-size-base;
				}
			}

			.footer {
				.input-box {
					width: 100%;
					display: flex;
					justify-content: center;

					input {
						text-align: center;
					}
				}

				.time-content {
					width: 100%;
					display: flex;
					align-items: center;
					color: $uni-text-color-grey;
					box-sizing: border-box;
					padding: 0rpx 20rpx;

					.text {
						padding: 0rpx 20rpx;
					}
				}

				.button {
					width: 50%;
					margin: 20rpx auto;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: $uni-color-topic;
					border-radius: $uni-border-radius-lg;
					padding: 10rpx 0rpx;
					color: #fff;
				}
			}

		}

		.item-order {
			width: 100%;
			height: calc(100vh - 502rpx);
			border-radius: $uni-border-radius-lg;
			margin-top: $uni-spacing-margin-sm;
			background-color: $uni-text-color-inverse;
			box-shadow: $uni-bg-shadow;
			overflow: scroll;

			.item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: $uni-spacing-padding-sm;
				box-sizing: border-box;
				border-top: 1rpx solid $uni-border-color;

				.left {
					font-size: $uni-font-size-lg;
					display: flex;
					flex-direction: column;

					.orderid {
						padding: 10rpx 0rpx;
					}

					.time {
						color: $uni-text-color-grey;
					}
				}

				.right {
					color: $uni-color-topic;
					font-size: $uni-font-size-base;
				}
			}
		}


	}
</style>